<template>
	<!-- 有数据 -->
	<view class="list" v-if="addressList.length > 0">
		<view class="item" v-for="(item, i) in addressList" :key="i" @tap="selectAddress(item)">
			<view class="icon">
				<u-image width="180rpx" height="180rpx" :src="getServerStatic('/static/images/a21.png')" ></u-image>
			</view>
			<view class="">
				<view class="user-info-wrap">
					<view class="user-info">
                        <view class="name">{{ item.name }}</view>
                        <view class="age">{{ item.mobile }}</view>
                        <view class="self" v-if="item.default == 1">默认</view>
					</view>
					<view class="tool-box" v-if=" sourceType == '' ">
						<view class="tool-item" @tap="showCancelPop(item.id)">
							<u-icon name="trash" color="#000000" size="18"></u-icon>
							<view class="">删除</view>
						</view>
						<view class="tool-item" @tap="editAddress(item.id)">
							<u-icon name="edit-pen" color="#000000" size="18"></u-icon>
							<view class="">编辑</view>
						</view>
					</view>
				</view>
				<view class="mobile">
                    {{ item.province }} {{ item.city }} {{ item.district }} {{ item.address }}
				</view>
			</view>
		</view>
	</view>
	<!-- 无数据 -->
	<view class="empty-box" v-else>
		<u-empty textColor="#000000" text="暂无地址~" mode="data" :icon="getServerStatic('/static/images/empty.png')">
		</u-empty>
	</view>

	<view class="btn" v-if=" sourceType == '' ">
		<u-button throttleTime="1000"
                  :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}"
                  :hairline="false" type="mini" shape="circle"
                  color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)"
                  @click="goAddressAdd">添加收货地址</u-button>
	</view>

	<!-- 删除模态框 -->
	<u-modal showCancelButton :show="cancelPop" title="删除地址" @cancel="cancelPop = false" @confirm="handleDelete" confirmColor="#516DDB">
		<view class="tip">是否要确定删除该地址？</view>
	</u-modal>
</template>

<script setup>
    import { onLoad } from '@dcloudio/uni-app'
    import { ref } from 'vue'
    import {deleteAddress, getAddress} from "@/api/user";
    import {checkAndFixUrl, getServerStatic} from "@/utils/tool";
    import {setCache} from "@/utils/cache";

    const addressList = ref([])

	const sourceType = ref('')
	const checkoutType = ref('')
	const skuId = ref(0)
	const quantity = ref(0)
	const cartIdsStr = ref('')

	onLoad((evt) => {
        console.log('address', evt)
		sourceType.value = evt?.source || ''
        checkoutType.value = evt?.checkoutType || ''
        skuId.value = evt?.skuId || ''
        quantity.value = evt?.quantity || ''
        cartIdsStr.value = evt?.cartIdsStr || ''

        handleGetAddress()
	})

    const cancelPop = ref(false)
    const deleteId = ref(0)
    const showCancelPop = (id) => {
        cancelPop.value = true
        deleteId.value = id
    }

    const handleDelete = async () => {
        cancelPop.value = false
        console.log('删除', deleteId.value)
        const {code, data, message } = await deleteAddress({id: deleteId.value})
        if (code == 1) {
            uni.showToast({
                mask: true,
                title: '删除成功',
                icon: 'success'
            })
            await handleGetAddress()
        } else {
            uni.showToast({
                mask: true,
                title: message ?? '删除失败',
                icon: 'error'
            })
        }
    }

	const goAddressAdd = () => {
		uni.navigateTo({
			url: `/mine/address/add?source=${sourceType.value}&checkoutType=${checkoutType.value}&skuId=${skuId.value}&quantity=${quantity.value}&cartIdsStr=${cartIdsStr.value}`
		})
	}

	// 选择地址
	const selectAddress = (address) => {
		if (sourceType.value == 'payment') {
            // setCache('confirmAddress', JSON.stringify(address));
            // console.log(JSON.stringify(address))
            // return false
            // uni.redirectTo({
            //    url: `/mine/drug-store/confirm?type=${checkoutType.value}&sku_id=${skuId.value}&quantity=${quantity.value}&cart_ids=${cartIdsStr.value}&address_id=${address.id}`,
            // })

			uni.navigateBack({
				delta: 1,
				success: () => {
					uni.$emit('select', address)
				}
			})
		}
	}

    // 地址列表
    const handleGetAddress = async () => {
        const { code, data, message } = await getAddress({})
        if (code == 1) {
            addressList.value = data
        }
    }

    // 编辑
    const editAddress = (id) => {
        uni.navigateTo({
            url: `/mine/address/add?id=${id}`
        })
    }
</script>

<style lang="scss" scoped>
	.tip {
		font-size: 30rpx;
		color: #312C2A;
		text-align: center;
	}
	.empty-box {
		@include center(100%, 100vh);
	}
	.list {
		padding: 60rpx 26rpx 200rpx;
		.item {
			position: relative;
			margin-bottom: 30rpx;
			padding: 34rpx 38rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
            box-shadow: 0 0 20rpx 1rpx rgba(187,187,187,.16);

			.icon {
				position: absolute;
				top: 0;
				right: 38rpx;
				z-index: 99;
			}

			.user-info-wrap {
				@include between(100%);
				.tool-box {
					position: relative;
					z-index: 999;
					@include start();
					.tool-item {
						@include start();
						margin-left: 24rpx;
						font-size: 24rpx;
						color: #000000;
						& >view {
							margin-left: 4rpx;
						}
					}
				}
			}
			.user-info {
				@include start();
				align-items: flex-end;
				.name {
					font-size: 32rpx;
					color: #312C2A;
				}
				.age {
					font-size: 26rpx;
					color: #606672;
					margin-left: 26rpx;
				}
				.self {
					@include center(86rpx, 38rpx);
					margin-left: 30rpx;
					background: linear-gradient(315deg, #4975EC 0%, #97B3FF 100%);
					border-radius: 7rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
			.mobile {
				margin-top: 38rpx;
				font-size: 26rpx;
				color: #606672;
			}
		}
	}
	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 999;
	}
</style>
